/*
 * 第三方登录组件
 */
<template name="ys-login-third">
    <view class="ys-login-third">
        <view class="title">其他登录方式</view>
        <view class="list">
            <button class="btn" hover-class="" @tap="wexinLogin"><view class="icon weixin-icon"></view><!-- 微信登录 --></button>
        </view>
    </view>
</template>

<script>
    export default {
        name: "ys-login-third",
        props: {
        },
        methods: 
        {
            /*
             * 微信登陆
             */
            wexinLogin: function() 
            {
                uni.login({
                    provider: 'weixin',
                    success: function (loginRes) {
                        uni.getUserInfo({
                            provider: 'weixin',
                            success: function (infoRes) {
                                console.log(JSON.stringify(infoRes));
                                console.log('用户昵称为：' + infoRes.userInfo.nickName);
                            }
                        });
                    }
                });
            }
        }        
    }
</script>

<style lang="scss">
    .ys-login-third {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 620upx;
        margin-top: 100upx;
        .title {
            position: relative;
            font-size: 80%;
        }
        .title::before,
        .title::after {
          content: "";
          position: absolute;
          top: 50%;
          width: 200rpx;
          height: 1px;
          background-color: #ccc;
        },
        .title::before {
         right: 90%;
        }
        .title::after {
         left: 90%;
        }        
        .list {
            display: flex;
            justify-content: center;
            margin-top: 30upx;
            width: 100%;
            .btn {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: $page_bg_color;     
                margin: 0 5upx;
                border: none;
                .icon {
                    display: block;
                    width: 80upx;
                    height: 80upx;
                    border: none;
                    background-size: 80upx 80upx;
                }
            }  
            .btn::after {
                border: none;
            }
            .weixin-icon {
                background: url("~@/static/images/icons/icon-weixin.png");
            }
        }
    }
    uni-button:after {
        border: none;
    }
</style>
